<!-- 首页 -->
<template>
	<view class="page-box">
		<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="content">颜值投票详情</block></cu-custom>
		<view class="body-box">
			<view class="card-brand">
				<view class="card-avatar">
					<u-avatar size="large" :src="info.avatar" @click="userCenter(info)"></u-avatar>
				</view>
				<view class="brand-name">{{info.nickName}}</view>
				<view class="brand-info weui-cell">
					<view class="brand-tip">
						<view class="brand-tip-text">票数统计</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view class="brand-no">
						<view class="brand-no-text">编号:</view>
						<view class="brand-no-num">{{info.id}}</view>
					</view>
				</view>
				<view class="brand-rank">
					<view class="rank-box">
						<view class="rank-num">{{info.cityRank}}</view>
						<view class="rank-text">全国排名</view>
					</view>
					<view class="rank-box">
						<view class="rank-num">{{info.voteNum}}</view>
						<view class="rank-text">票数</view>
					</view>
					<view class="rank-box">
						<view class="rank-num">{{info.chaVoteNum}}</view>
						<view class="rank-text">距前一名</view>
					</view>
				</view>
			</view>
			
			<view class="sign-box" v-if="info.message">{{info.message}}</view>
			
			<u-swiper height="1000" :list="imgList" mode="dot" @click="previewImage"></u-swiper>
			
			<view class="vote-user">
				<view class="vote-user-header">
					<view>最新投票用户</view>
					<!-- <view>查看更多311位</view> -->
				</view>
				<view class="avatar-list">
					<view class="avatar-user" v-for="(item, index) in dataList" :key="index">
						<u-avatar size="50" :src="item.avatar" @click="userCenter(item)"></u-avatar>
					</view>
				</view>
			</view>
		</view>
		
		<view class="tool-box">
			<view class="share-btn" @click="home">
				<u-icon name="home" color="#fff" size="36"></u-icon>
				<view class="share-text">首页</view>
			</view>
			<view class="btn" @click="addVote">立即投票</view>
			<u-button :custom-style="customStyle" :hair-line="false" open-type="share">
				<u-icon name="fenxiang" custom-prefix="iconfont" color="#fff" size="46"></u-icon>
				<view class="share-text">分享</view>
			</u-button>
		</view>
		
		<user-auth></user-auth>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: 0,
			info: {},
			imageList: [],
			imgList: [],
			list: [{
					image: 'https://thirdwx.qlogo.cn/mmopen/vi_32/X6FmPYHUDePpj640ZJl09PAqKAqKObfgh14g0ffpQic2Y6qiaJfDSicEaCLS3vpC4nR2xjibTibmtKWRuv0FeLHxI5w/0',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				},
				{
					image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
					title: '身无彩凤双飞翼，心有灵犀一点通'
				},
				{
					image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}
			],
			uid: '',
			customStyle: {
				margin: '0',
				display: 'flex',
				flexDirection: 'column',
				lineHeight: 'unset',
				border: '0',
				padding: '0',
				backgroundColor: '#d90891',
				borderRadius: '100%',
				width: '100rpx',
				height: '100rpx',
				color: '#fff',
			},
			dataList: [],
		};
	},
	onLoad(option) {
		this.id = option.id;
		if(option.shareUserId){
			this.$u.vuex('vuex_share_id', option.shareUserId);
		}
		this.getDetail();
		this.getDataList();
		this.getUid();
	},
	onShareAppMessage(res) {
		return {
			title: '正在参加全国男神女神评选大赛，快来帮我投票吧！',
			path: '/packgeMine/pages/vote/game/detail?id='+this.id+'&shareUserId='+this.vuex_user.userId,
		};
	},
	onShareTimeline() {
		return {
			title: '正在参加全国男神女神评选大赛，快来帮我投票吧！',
			path: '/packgeMine/pages/vote/game/detail?id='+this.id+'&shareUserId='+this.vuex_user.userId,
		};
	},
	methods: {
		getDetail() {
			this.$u.get('/wq/vote/getDetail',{
				id: this.id
			}).then(res => {
				this.info = res.data;
				var imageList = this.info.image.split(',');
				for(var i=0;i<imageList.length;i++){
					var image = imageList[i];
					var img = {
						'image': image
					}
					this.imageList.push(image);
					this.imgList.push(img);
				}
			})
		},
		getUid() {
			this.$u.get('/wq/vote/getUid').then(res => {
				this.uid = res.msg;
			})
		},
		getDataList() {
			this.$u.get('/wq/voteUser/list',{
				voteId: this.id,
				pageNum: 1,
				pageSize: 10,
			}).then(res => {
				this.dataList = res.rows;
			})
		},
		userCenter(item) {
			this.judgeLogin(() => {
				this.$u.route({
					url: 'packgeMine/pages/center/index',
					params: {
						userId: item.userId,
					}
				});
			});
		},
		previewImage(index) {
			uni.previewImage({
				current: index, //预览图片的下标
				urls: this.imageList, //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				indicator: 'number',
				loop: true
			});
		},
		addVote() {
			this.$u.vuex('vuex_login_to', false);
			this.$u.post('/wq/voteUser/add',{
				voteId: this.id,
				uid: this.uid,
			}).then(res => {
				this.getUid();
				this.$u.toast("投票成功");
			});
		},
		home() {
			this.$u.route({
				url: 'packgeMine/pages/vote/game/index',
			});
		},
	}
}; 
</script>
<style lang="scss">
	page {
		background-color: #f5efef;
	}
	.page-box {
		padding-bottom: 60px;
	}
	.card-list {
		display: flex;
		flex-wrap: wrap;
		padding: 10px;
		padding-top: 0;
	}
	.card {
		background-color: #fff;
		border-radius: 5px;
	}
	.card-image {
		width: 100%;
		height: 400rpx;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}
	.card-box {
		display: flex;
		flex-direction: column;
		width: 50%;
		padding: 5px;
	}
	.card-name {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 5px 10px;
	}
	.image-box {
		position: relative;
	}
	.card-no {
		position: absolute;
		top: 0;
		background-color: #d90891;
		color: #fff;
		padding: 5px 10px;
		border-top-left-radius: 5px;
		border-bottom-right-radius: 5px;
		font-size: 24rpx;
	}
	.card-check {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 5px 10px;
		padding-bottom: 15px;
	}
	.vote-text {
		font-size: 30rpx;
		color: #d90891;
	}
	.city-text {
		font-size: 30rpx;
		color: #802eae;
	}
	.nickname {
		font-size: 30rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 100px;
	}
	.tool-box {
		display: flex;
		position: fixed;
		bottom: 0;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 5px 15px;
	}
	.btn-right {
		display: flex;
	}
	.btn {
		background-color: #d90891;
		padding: 10px 140rpx;
		color: #fff;
		font-size: 30rpx;
		border-radius: 20px;
	}
	.share-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #d90891;
		border-radius: 100%;
		width: 100rpx;
		height: 100rpx;
		color: #fff;
		line-height: unset;
		margin: 0;
	}
	.share-text {
		font-size: 24rpx;
	}
	
	.card-brand {
		background-color: #fff;
		position: relative;
		border-radius: 5px;
		padding: 15px 20px;
		padding-top: 10px;
		box-shadow:0px 0px 10px #9e9898;
		margin-bottom: 15px;
	}
	.card-avatar {
		position: absolute;
		top: -30px;
		left: 15px;
	}
	.brand-name {
		font-size: 10px;
		padding-left: 160rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 500rpx;
	}
	.brand-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		padding: 10px 0;
	}
	.weui-cell:after {
	    content: " ";
	    position: absolute;
	    left: 0;
	    bottom: 0;
	    right: 0;
	    height: 1px;
	    border-bottom: 1px solid #e5e5e5;
	    color: #e5e5e5;
	    -webkit-transform-origin: 0 0;
	    transform-origin: 0 0;
	    -webkit-transform: scaleY(0.5);
	    transform: scaleY(0.5);
	    z-index: 2;//看情况使用
	}
	.brand-rank {
		display: flex;
		padding: 20px 0;
		padding-bottom: 0;
	}
	.rank-box {
		display: flex;
		flex-direction: column;
		flex: 1;
		align-items: center;
		justify-content: center;
	}
	.brand-no {
		display: flex;
		align-items: center;
	}
	.brand-no-text {
		font-size: 26rpx;
		margin-right: 5px;
	}
	.brand-no-num {
		font-size: 40rpx;
		color: #e5038e;
	}
	.brand-tip {
		display: flex;
		align-items: center;
		font-size: 26rpx;
	}
	.rank-num {
		font-size: 40rpx;
		color: #e5038e;
		margin-bottom: 5px;
	}
	.rank-text {
		font-size: 28rpx;
	}
	.body-box {
		padding: 15px;
		padding-top: 45px;
	}
	.sign-box {
		padding: 20px;
		background-color: #fff;
		margin-bottom: 15px;
		border-radius: 5px;
		font-size: 30rpx;
	}
	.vote-user {
		display: flex;
		background-color: #fff;
		margin-top: 15px;
		padding: 15px;
		border-radius: 5px;
		flex-direction: column;
	}
	.vote-user-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex: 1;
	}
	.avatar-list {
		display: flex;
		align-items: center;
		margin-top: 15px;
	}
	.avatar-user {
		margin-right: 5px;
	}
</style>
